
<template>
  <div class="icons">
    <swiper :options="swiperOption" v-if='showSwiper'>
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icon" v-for="item in page" :key='item.id'>
          <div class="icon-img">
            <img class="icon-imgcontert" :src="item.imgUrl">
          </div>
          <p class="icon-desc" v-text="item.desc"></p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  export default{
    name:'HomeIcon',
    props:{
      list:Array
    },
    data(){
      return {
        swiperOption:{
          pagination:'.swiper-pagination',
          loop:true,
        }
      }
    },
    computed:{
      pages(){
        var pages=[];
        this.list.forEach((item,index) =>{
          const page = Math.floor(index/8);
          if(!pages[page]){
            pages[page] =[]
          }
          pages[page].push(item);
        })
        return pages
      },
      showSwiper(){
        return this.list.length;
      }
    }
  }
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import "~styles/varibles.styl"
  @import "~styles/mixins.styl"
  .icons >>> .swiper-container
    height :0;
    padding-bottom:50%;
    overflow:hidden;
  .icons
    margin-top :0.1rem;
    .icon
      position :relative;
      overflow :hidden;
      float :left;
      width :25%;
      height 0;
      padding-bottom :25%;
      .icon-img
        position :absolute;
        left:0;
        top:0;
        right:0;
        box-sizing :border-box;
        padding :0.1rem;
        bottom:0.44rem;
        .icon-imgcontert
          display :block;
          margin :0 auto;
          height:100%;
      .icon-desc
        position :absolute;
        left:0;
        right:0;
        bottom:0;
        height :0.44rem;
        line-height :0.44rem;
        text-align :center;
        color :$darkTextColor;
        ellipsis();
</style>
